<template>
    <el-table
        class="main-table"
        :data="copyTableData"
        size="small"
        header-row-class-name="table-header"
        header-cell-class-name="table-header-cell"
        row-class-name="table-row"
        row-key="id"
        :cell-style="{'text-align':'center'}"
        :header-cell-style="{'text-align':'center'}"
    >
      <el-table-column
        v-for="(colItem, colIndex) of columnData"
        :key="colItem.id"
        :type="colItem.type"
        :prop="colItem.key"
        :label="colItem.label"
        :width="colItem.width"
        show-overflow-tooltip
      >
      </el-table-column>
    </el-table>
    <el-pagination
      class="table-pagination"
      layout="prev, pager, next"
      :total="isApiPagination ? tablePaginationInfo.total : tableData.length"
      :page-size="tablePageSize"
      :current-page="tableCurrentPage"
      small
      @current-change="changeTableCurrentPage"
    />
  </template>
  
  <script setup>
  import {defineProps, watch, ref, defineEmits, computed} from "vue";
  
  const props = defineProps({
    tableData: {
      type: Array,
      default: () => []
    },
    columnData: {
      type: Array,
      default: () => []
    },
    isApiPagination: { // 是否前端分页
      type: Boolean,
      default: false
    },
    tablePaginationInfo: { // 接口分页时-table分页信息
      type: Object,
      default: () => {}
    },
  });
  
  const emit = defineEmits(['changeTableDataCheckStatus', 'changePageNum'])
  
  const copyTableData = ref([])
  const tableCurrentPage = ref(1)
  const tablePageSize = ref(4)
  
  watch(
      () => props?.tableData,
      (newVal) => {
        copyTableData.value = props?.tableData.slice(0, tablePageSize.value)
      }
  )
  
  watch(
      () => props?.tablePaginationInfo?.currentPage, // 监听页面变更-接口分页
      (newVal) => {
        tableCurrentPage.value = newVal
      }
  )
  
  const checkedNum = computed(() => {
    return props?.tableData?.filter(x => x.isChecked)?.length || 0
  })
  
  const changeTableCurrentPage = (page) => {
    tableCurrentPage.value = page
    if (props?.isApiPagination) { // 接口分页
      emit('changePageNum', page)
    } else { // 前端分页
      copyTableData.value = props?.tableData.slice(tablePageSize.value * (tableCurrentPage.value - 1), tablePageSize.value * tableCurrentPage.value)
    }
  }
  
  </script>
  
  <style scoped lang="less">
  .main-table {
    background-color: transparent;
    /deep/ .table-header {
      background: linear-gradient( 60deg, #0E5FFF 0%, #00FFFF 100%);
      .table-header-cell {
        background-color: transparent;
        color: white;
        border-bottom: 0;
      }
    }
    /deep/ .table-row {
      background: rgba(14,129,255,0.34);
      height: 10px !important;
      .el-table__cell {
        border-bottom: 0;
        padding-bottom: 0;
        color: white;
        font-size: 12px;
        padding-top: 0;
        .cell {
          //line-height: 20px;
        }
      }
    }
    /deep/ .table-row:hover {
      .el-table__cell {
        background: transparent;
      }
    }
    ::v-deep .el-table__body{
      //-webkit-border-horizontal-spacing: 13px;  // 水平间距
      -webkit-border-vertical-spacing: 5px;  // 垂直间距
    }
    /deep/ .el-table__inner-wrapper:before {
      height: 0;
    }
  }
  .table-pagination {
    display: flex;
    justify-content: center;
    /deep/ button {
      background-color: transparent;
      color: white;
    }
    /deep/ button:disabled {
      color: gray;
    }
    /deep/ ul li:not(.is-active) {
      color: white;
    }
    /deep/ ul li {
      background-color: transparent;
    }
  }
  </style>